<template>
	<view class="login">
		<view class="login-box">
			<uni-forms ref="registerForm" :rules="registerRules" :modelValue="loginData" labelWidth="150rpx"
				class='login-form'>
				<uni-forms-item label="账号" required name="account">
					<uni-easyinput v-model="loginData.account" placeholder="请输入账号" />
				</uni-forms-item>
				<uni-forms-item label="密码" required name="password">
					<uni-easyinput v-model="loginData.password" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item label="身份" required name="identity" :clear="false">
					<uni-data-select v-model="loginData.identity" :localdata="range"></uni-data-select>
				</uni-forms-item>
			</uni-forms>
			<button class="login-btn" @click="handleRegister('registerForm')">立即注册</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//注册数据
				loginData: {
					account: '',
					password: '',
					identity: 0,
				},
				//登录方式
				range: [{
						value: 0,
						text: "用户"
					},
					{
						value: 1,
						text: "医生"
					},
				],
				// 校验规则
				registerRules: {
					account: {
						rules: [{
							required: true,
							errorMessage: '账号不能为空'
						}, {
							validateFunction: (rule, value, data, callback) => {
								let allData = [...this.$store.state.userManagement, ...this.$store.state
									.doctorManagement,
									...this.$store.state.adminData
								]
								console.log(allData);
								allData.forEach(item => {
									if (item.account == value) {
										callback('此账号已被使用')
									}
								})
								return true
							}
						}, {
							validateFunction: function(rule, value, data, callback) {
								let reg = /^[A-Za-z0-9]{3,10}$/
								if (reg.test(value)) {
									return true
								} else {
									callback('密码必须是3-10位的数字或字母')
								}
							}
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}, {
							validateFunction: function(rule, value, data, callback) {
								let reg = /^[A-Za-z0-9]{3,10}$/
								if (reg.test(value)) {
									return true
								} else {
									callback('密码必须是3-10位的数字或字母')
								}
							}
						}]
					},
					identity: {
						rules: [{
							validateFunction: function(rule, value, data, callback) {
								if (value === '') {
									callback('请选择身份')
								} else {
									return true
								}
							}
						}]
					}
				},
			}
		},
		onReady() {
			this.$refs.registerForm.setRules(this.registerRules)
		},
		methods: {
			handleRegister(ref) {
				console.log(this.$store.state.doctorManagement);
				console.log(this.$store.state);
				this.$refs[ref].validate().then(res => {
					if (this.loginData.identity == 0) {
						this.$store.commit('addUserData', res)
					} else if (this.loginData.identity == 1) {
						this.$store.commit('addDoctorManagement', res)
					}
					uni.showToast({
						title: `注册成功`,
						duration: 1000,
						mask: true
					})

					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/login/index'
						})
					}, 1000)

				}).catch(err => {
					return
				})
			},
		},
		mounted() {
			console.log(this.$store.state);
		}
	}
</script>

<style lang="scss">
	.login {
		width: 100vw;
		opacity: 0.8;
		background: linear-gradient(white, transparent);

		.login-box {
			// background-color: transparent;
			padding: 100rpx 0;
		}

		.uni-forms,
		.login-form {
			width: 600rpx;
			margin: 0 auto;
		}

		.login-btn {
			margin-top: 80rpx;
			margin-bottom: 30rpx;
			width: 600rpx;
			height: 80rpx;
			line-height: 80rpx;
		}
	}
</style>
